<!DOCTYPE html>
<html lang="en">
<head>
	<title>La Casa - Real Estate HTML5 Home Page Template</title>
	<meta charset="utf-8">
	<meta name="author" content="pixelhint.com">
	<meta name="description" content="La casa free real state fully responsive html5/css3 home page website template"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
	
	<link rel="stylesheet" type="text/css" href="css/responsive.css">
	<link rel="stylesheet" type="text/css" href="css/detail.css">
	<link rel="stylesheet" type="text/css" href="css/showimg.css">
	

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/showimg/base.js"></script>
	<script type="text/javascript" src="js/showimg/showimg.js"></script>
	<SCRIPT src="js/showimg/lib.js" type=text/javascript></SCRIPT>
	<SCRIPT src="js/showimg/163css.js" type=text/javascript></SCRIPT>
	
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=cd73b4c03223ddc97b49b9f72b09afc5"></script>
	
	
	<!-- 城市定位 -->
	<script language="javascript" type="text/javascript" 
	src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>
	<script language="javascript" type="text/javascript" >
		
		jQuery(function($){
			var city = remote_ip_info.city;
            var insert = $("#city");
            insert.html(city + "[切换]" );
            
            initHouseDetail();
            /* initMap(0,0); */
        });
        
        function initHouseDetail() {
        	//查询数据库，拿到数据对象
        	
        	$("#houseTitle").html("百苑花园小区精装修三方一厅");
        	$("#price").html("5400");
        	$("#houseType").html("三室一厅");
        	$("#buildArea").html("59平米");
        	$("#floor").html("2/12层");
        	$("#faceTo").html("向北");
        	$("#fitment").html("中等装修");
        	
			$("#community").html("百苑花园小区");
			$("#district").html("白云区");
			$("#comArea").html("新市");
			
			$("#address").html("白云花园路12号");
			$("#phoneNumber").html("15626174988");
			$("#contactPerson").html("冯先生");
        }
        
        function initMap(var pox, var poy) {
        	var map = new AMap.Map('container',{
        	zoom: 10,
        	center: [113.41069793701172,23.04681396484375]
    		});
   			var marker = new AMap.Marker({
        	position: [113.41069793701172, 23.04681396484375],
        	map:map
    		});
        }
        
	</script>
</head>
<body>
	<header  style="background-color:#333;">
		<div class="wrapper">
			<a href="index.html"
				style="font-size: 32px; text-decoration: none; line-height: 60px; color: rgb(255, 223, 77);">优房网</a>
			<a id="city" href="#"
				style="font-size: 12px; color: #ddd; text-decoration: none;"></a>
			<nav>
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">租房</a></li>
					<li><a href="#">新房</a></li>
					<li><a href="signin.html">登入</a></li>
					<li><a href="emailSignup.html">注册</a></li>
					<!-- <li><a href="#">Contact</a>
						</li> -->
				</ul>
				<!-- <a href="signin.html" class="login_btn">注册</a> -->
				<a href="emailSignup.html" class="login_btn">发布房源</a>
			</nav>
		</div>
	</header>

	<div id="search_land">
		<div id="search">
			<!-- <img src="images/search.png"></img> -->
			<div id="search_button" onclick="search()">
				搜索
			</div>
			<form id="search_form" action="search.action">
				<input name="searchFor" type="text" size="18" style="color: gray"
					value="请输入地段、小区或者房型"
					onfocus="if (value =='请输入地段、小区或者房型'){value =''}"
					onblur="if (value ==''){value='请输入地段、小区或者房型'}" />
			</form>
		</div>
	</div>
	
	
	<div class="detail">
		<div class="brief">
			<p class="title" id="houseTitle"></p>
			<div class="showimg">
				<div class=jqzoom id=spec-n1
				onClick="window.open('http://www.16sucai.com/')">
					<IMG id="firstImg" height=350 src="img/showimg/img04.jpg"
						jqimg="img/showimg/img04.jpg" width=450>
				</div>
				<div id=spec-n5>
					<div class=control id=spec-left>
						<img class="left" src="img/showimg/left.gif" />
					</div>
					<div id=spec-list>
						<ul class=list-h id="pic-list">
							<li><img src="img/showimg/img01.jpg"></li>
							<li><img src="img/showimg/img02.jpg"></li>
							<li><img src="img/showimg/img03.jpg"></li>
							<li><img src="img/showimg/img04.jpg"></li>
							<li><img src="img/showimg/img01.jpg"></li>
							<li><img src="img/showimg/img02.jpg"></li>
							<li><img src="img/showimg/img03.jpg"></li>
							<li><img src="img/showimg/img04.jpg"></li>
							<li><img src="img/showimg/img01.jpg"></li>
							<li><img src="img/showimg/img02.jpg"></li>
							<li><img src="img/showimg/img03.jpg"></li>
							<li><img src="img/showimg/img04.jpg"></li>
						</ul>
					</div>
					<div class=control id=spec-right>
						<img src="img/showimg/right.gif" />
					</div>

				</div>
			</div>
			
				<div class="information">
					<p id="rent" style="background-color:">
						<label>租&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;金&nbsp;:&nbsp;</label>
						<span><a id="price" class="boldText">3800</a></span>
						<a id="payType">元/月</a>
						<a id="payDetail">[押一付二]</a>
					</p>
					<p id="houseBrief">
						<label>房屋概况&nbsp;:</label>
						<span id="houseType">二室一厅</span>
						<span id="buildArea">50平米</span>
						<span id="floor">5/15层</span>
						<span id="faceTo">向南</span>
						<span id="fitment">精装修</span>
					</p>
					<p id="area" style="background-color:">
						<label>小&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;区&nbsp;:&nbsp;</label>
						<span><a id="community" href="#">雅乐居花园</a></span>
						<span>[<a id="district" href="#">番禺区</a>/
						<a id="comArea" href="#">大学城</a>]</span>
					</p>
					<p >
						<label>地&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;址&nbsp;:</label>
						<span id="address">南村镇兴南大道398号</span>
					</p>
					<p id="contact" style="background-color:">
						<label>联系方式&nbsp;:</label>
						<span><a id="phoneNumber" class="boldText">13800138000</a></span>
						<span id="contactPerson">陈先生</span>
					</p>
					<p id="none">
					</p>
					<p id="rent">
						<span>分享</span>
						<span>收藏</span>
						<span>举sdaffsafd报</span>
					</p>
					
				</div>
		</div>
		<div class="descript">
			<div class="title" style="border-bottom:1px solid #DDD;">
				<span style="border-bottom:2px solid rgb(255,102,0);">房源描述</span>
			</div>
			<div class="sourceDes">
				<span>可变长度域对可变长数据元的说明：对任何最大长度小于100个字符的可变长度数据元，
				两个附加位位于该数据元之前，标明其后所跟数据元的长度。其格式表示为LLVAR。对任何最大长度小于1000个字符的可变长度数据元，
				三个附加位位于该数据元之前，标明其后所跟数据元的长度。其格式表示为LLLVAR。</span>
			</div>
		</div>
		<div class="images">
			<div class="title" style="border-bottom:1px solid #DDD;">
				<span style="border-bottom:2px solid rgb(255,102,0);">房源图片</span>
			</div>
			<img src="img/showimg/img01.jpg">
			<img src="img/showimg/img02.jpg">
			<img src="img/showimg/img03.jpg">
			<img src="img/showimg/img04.jpg">
		</div>
		<div class="m">
			<div class="title" style="border-bottom:1px solid #DDD;">
				<span style="border-bottom:2px solid rgb(255,102,0);">房源地图</span>
			</div>
			<div id="container"></div>
			<script type="text/javascript">
				var map = new AMap.Map('container',{
      			    zoom: 10,
        			center: [113.41069793701172,23.04681396484375]
    			});
   				var marker = new AMap.Marker({
      			    position: [113.41069793701172, 23.04681396484375],
       			    map:map
    			});
			</script>
		</div>
	</div>
	
	
	<footer>
		<div class="wrapper footer">
			<ul>
				<li class="links">
					<ul>
						<li><a href="#">About</a></li>
						<li><a href="#">Support</a></li>
						<li><a href="#">Terms</a></li>
						<li><a href="#">Policy</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</li>

				<li class="links">
					<ul>
						<li><a href="#">Appartements</a></li>
						<li><a href="#">Houses</a></li>
						<li><a href="#">Villas</a></li>
						<li><a href="#">Mansions</a></li>
						<li><a href="#">...</a></li>
					</ul>
				</li>

				<li class="links">
					<ul>
						<li><a href="#">New York</a></li>
						<li><a href="#">Los Anglos</a></li>
						<li><a href="#">Miami</a></li>
						<li><a href="#">Washington</a></li>
						<li><a href="#">...</a></li>
					</ul>
				</li>

				<li class="about">
					<p>La Casa is real estate minimal html5 website template, designed and coded by pixelhint, tellus varius, dictum erat vel, maximus tellus. Sed vitae auctor ipsum</p>
					<ul>
						<li><a href="http://facebook.com/pixelhint" class="facebook" target="_blank"></a></li>
						<li><a href="http://twitter.com/pixelhint" class="twitter" target="_blank"></a></li>
						<li><a href="http://plus.google.com/+Pixelhint" class="google" target="_blank"></a></li>
						<li><a href="#" class="skype"></a></li>
					</ul>
				</li>
			</ul>
		</div>

		<div class="copyrights wrapper">
			Copyright © 2015 <a href="http://pixelhint.com" target="_blank" class="ph_link" title="Download more free Templates">Pixelhint.com</a>. All Rights Reserved.
		</div>
	</footer><!--  end footer  -->
	
</body>
</html>